<!DOCTYPE html>
<html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		@import url(./../lib/Cesium/Widgets/widgets.css);

		body,
		html,
		#map {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-family: "微软雅黑";
		}
	</style>


	<title>dat.GUI插件</title>
</head>

<body onload="onload()">
	<script src="./../lib/lodash.min.js"></script>
	<script src='./../lib/threejs/three.js'></script>
	<script src='./../lib/threejs/stats.min.js'></script>
	<script src='./../lib/threejs/dat.gui.min.js'></script>
</body>

</html>
<script type="text/javascript">

	let renderer, camera, scene, stats, gui, rotate = true, step = 0,
		controls, w = window.innerWidth, h = window.innerHeight, geometry;


	function initRenderer() {
		renderer = new THREE.WebGLRenderer();
		renderer.setSize(w, h);
		document.body.appendChild(renderer.domElement);
	}
	function initCamera() {
		camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 300);
		camera.position.set(0, 0, 150)
	}
	function initScene() {
		scene = new THREE.Scene();
	}

	function initGUI() {
		controls = {
			rotate: true,
			geometry: "box"
		}
		gui = new dat.GUI();
		gui.add(controls, "rotate").name("旋转").onChange(e => {
			rotate = e;
		})
		gui.add(controls, "geometry", ["box", "circle", "cone", "cylinder", "sphere", "plane", "torus"]).name("模型").onChange(e => {
			initMesh(e)
		})
	}
	function initStats() {
		stats = new Stats();
		document.body.appendChild(stats.dom)
	}


	function animation() {
		requestAnimationFrame(animation)
		if (rotate && geometry) {
			step += 0.02;
			geometry.rotation.set(step, step, step);
		}
		stats.update();
		renderer.render(scene, camera)
	}

	function resetSize(){
		 
			w = window.innerWidth
			h = window.innerHeight
			renderer.setSize(w, h);
			initCamera()
		 
	}


	function initMesh(key) {
		let material = new THREE.MeshNormalMaterial();

		geometry && scene.remove(geometry);

		switch (key) {
			case "box":
				//创建立方体
				geometry = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5), material);
				break;
			case "circle":
				//创建圆
				geometry = new THREE.Mesh(new THREE.CircleGeometry(5, 32), material);
				break;
			case "cone":
				//创建圆锥
				geometry = new THREE.Mesh(new THREE.ConeGeometry(5, 20, 32), material);
				break;
			case "cylinder":
				//创建圆柱
				geometry = new THREE.Mesh(new THREE.CylinderGeometry(5, 5, 20, 32), material);
				break;
			case "sphere":
				//创建球
				geometry = new THREE.Mesh(new THREE.SphereGeometry(5, 32, 32), material);
				break;
			case "plane":
				//创建平面
				geometry = new THREE.Mesh(new THREE.PlaneGeometry(5, 5), material);
				break;
			case "torus":
				//创建圆环
				geometry = new THREE.Mesh(new THREE.TorusGeometry(10, 3, 16, 100), material);
				break;
		}

		geometry.position.set(0, 20, 0);
		scene.add(geometry);

	}



	function onload() {
		initRenderer()
		initCamera()
		initScene()
		initStats()
		initGUI()
		animation()
		window.onresize = resetSize
	}

</script>